<!-- 余额明细 -->
<template>
	<view>
		<navBar :title="title"></navBar>
		<view class="Tab">
			<u-tabs :list="list1" @click="click" :scrollable="false" :current="current" :lineColor="color"
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :itemStyle="itemStyle" lineHeight="1"
				:lineWidth="36"></u-tabs>
		</view>


		<view class="list" v-for="(item,index) in pageData" :key="index">
			<view class="flex-1 d-flex f-column">
				<text class="list_title">{{item.title}}</text>
				<text class="list_date">{{item.addDate}}</text>
			</view>
			<view class="moneyVal" :class="{'color_ff2':item.status == 0}">{{item.status == 1?'+':'-'}} {{item.money}}</view>
		</view>



		<emptys title="暂无相关记录" v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				list1: [{
					name: '全部明细',
					con_moneystatus: ''
				}, {
					name: '充值记录',
					con_moneystatus: 1,
				}, {
					name: '消费记录',
					con_moneystatus: 0,
				}],
				current: 0,
				activeStyle: {
					color: '',
					fontSize: '30rpx'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '28rpx'
				},
				itemStyle: {
					height: '38px'
				},
				pageData: [],
				page: 1,
				pageSize: 20,
				more: true,
				con_moneystatus: '',
			}
		},


		onLoad() {
			this.activeStyle.color = this.color
			this.getpageData()
		},
		methods: {
			click(e) {
				this.current = e.index
				this.con_moneystatus = e.con_moneystatus
				this.getpageData()
			},
			getpageData() {
				this.more = false
				this.$http.post({
					url: '/SRA_memberRecharge/moneyRecord',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: '',
						M: '',
						pageIndex: this.page,
						pageSize: this.pageSize,
						con_moneystatus: this.con_moneystatus
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.notice)
					const result = res.data || []
					this.page == 1 ? this.pageData = result : this.pageData = [...this.pageData, ...result]
					if (result.length < this.pageSize) this.more = false
				})
			}
		},
		onReachBottom(e) {
			if (!this.more) return
			this.page++
			this.getpageData()
		},
		computed: {
			...mapState(['vid', 'bid', 'color', 'nameDefinition', 'share']),
			title() {
				return `${this.nameDefinition.balanceTitle}明细`
			}
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				desc: this.share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: this.share.imageUrl
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 333) {
				this.showTop = true
			} else {
				this.showTop = false
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.Tab {
		width: 100%;
		padding-top: 10rpx;
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #f2f2f2;
	}

	.list {
		width: 710rpx;
		background-color: #ffffff;
		padding: 20rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.list_title {
		color: #000;
		font-size: 28rpx;
	}

	.list_date {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.moneyVal {
		font-size: 32rpx;
	}
</style>